<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>我的借款</span>
      </div>
      <div class="myMsg-box">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#e1e4e5' }"
          ref="myTable"
        >
          <el-table-column prop="amount" label="借款金额" width="180">
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" width="180">
          </el-table-column>
          <el-table-column prop="duration" label="借款期限(月)">
          </el-table-column>
          <el-table-column prop="loanRate" label="借款利率"> </el-table-column>
          <el-table-column
            prop="status"
            label="审核状态"
            :formatter="approveStateFormat"
          >
          </el-table-column>
          <el-table-column
            prop="debt_match_status"
            label="匹配状态"
            :formatter="matchStateFormat"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                :disabled="checkDisable(scope.row.debt_match_status)"
                @click="getRepayPlanList(scope.row.debt_id)"
                >还款计划</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="还款计划" :visible.sync="dialogVisible" width="35%">
        <el-card class="box-card" style="max-height: 500px; overflow-y: auto">
          <el-table :data="rePayPlanTableData" style="width: 100%">
            <el-table-column prop="currentTerm" label="当前期">
            </el-table-column>
            <el-table-column prop="receivableDate" label="还款日期">
            </el-table-column>
            <el-table-column prop="receivableMoney" label="还款金额">
            </el-table-column>
            <el-table-column
              prop="isReturned"
              label="还款状态"
              :formatter="isReturnedStateFormat"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  :disabled="checkRepayDisable(scope.row.isReturned)"
                  @click="onRepay(scope.row)"
                  >还款</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-dialog
          title="还款确认"
          :visible.sync="sonDialogVisible"
          width="20%"
          append-to-body
        >
          <span
            >还款金额为：{{ repayData.repayAmount }}，即将从账户余额还款</span
          >
          <span slot="footer" class="dialog-footer">
            <el-button @click="sonDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="startRepay">确 定</el-button>
          </span>
        </el-dialog>
      </el-dialog>
      <el-pagination
        @current-change="onPageChange"
        background
        layout="prev, pager, next"
        :page-count="pageData.totalPages"
        :current-page="pageData.curPage"
        :page-size="pageData.perPage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
  
  <script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 分页数据
      pageData: {
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页显示几条数据
        perPage: 3,
      },
      tableData: [],
      debt: {},
      dialogVisible: false,
      sonDialogVisible:false,
      rePayPlanTableData: [],
      repayData: {
        repay_id: "",
        repayAmount: "",
      },
    };
  },
  methods: {
    ...mapActions({
      getMyloanList: "loan/getMyloanList",
      getRepayPlan: "transaction/getRepayPlan",
      rePay: "transaction/rePay",
    }),
    // 格式化审核状态
    approveStateFormat(row) {
      if (row.status === 0) {
        return "待审批";
      } else if (row.status === 1) {
        return "已通过";
      } else {
        return "驳回";
      }
    },
    // 格式化匹配状态
    matchStateFormat(row) {
      if (!row.debt_match_status) {
        return "未匹配";
      } else if (row.debt_match_status === 1) {
        return "部分匹配";
      } else {
        return "完全匹配";
      }
    },
    // 格式化还款状态
    isReturnedStateFormat(row) {
      if (row.isReturned === 0) {
        return "未还款";
      } else if (row.isReturned === 1) {
        return "已还款";
      }
    },
    // 获取我的借款
    getMyLoan() {
      this.getMyloanList(this.pageData).then((res) => {
        this.tableData = res.content;
        this.pageData.totalPages = res.paginateInfo.pages;
      });
    },
    // 当前页码发生变化时的回调
    onPageChange(index) {
      this.pageData.curPage = index;
      this.getMyLoan();
    },
    // 检查还款计划按钮
    checkDisable(status) {
      return status != 2 ? true : false;
    },
    // 检查还款按钮
    checkRepayDisable(isReturned) {
      return isReturned ? true : false;
    },
    // 获取还款计划
    getRepayPlanList(debt_id) {
      this.debt = { debt_id: debt_id };
      this.getRePayList()
    },
    getRePayList(){
      this.getRepayPlan(this.debt).then((res) => {
        this.rePayPlanTableData = res;
        this.dialogVisible = true;
      });
    },
    // 点击还款
    onRepay(row) {
      this.repayData.repay_id = row.id;
      this.repayData.repayAmount = row.receivableMoney;
      this.sonDialogVisible = true
    },
    // 还款
    startRepay(){
      this.rePay(this.repayData).then(res =>{
        this.$message.success('还款成功')
        this.sonDialogVisible = false
        this.getRePayList()
      })
    }
  },
  created() {
    // 页面初始化完成获取我的借款列表
    this.getMyLoan();
    console.log("created", this.$refs);
  },
  mounted() {
    console.log("el", this.$el);
  },
};
</script>
  
  <style>
.msg-dialog .el-dialog__body {
  padding: 10px;
}
</style>
  
  <style lang="scss" scoped>
.msgData-card {
  min-height: 200px;
}
</style>